import React from 'react'
import axios from './../../axios'
import { Card} from 'antd'
import BaseForm from './../../components/BaseForm'

export default class BikeMap extends React.Component {
    state = {}
    map =""
    formList = [
        {
            type: "城市",
            field:"city1"
        },
        {
            type: "时间查询",
        },
        {
            type: "SELECT",
            label: '订单状态',
            field: 'order_status',
            placeholder: '全部',
            initialValue: '0',
            list: [{ id: '0', name: '全部' }, { id: '1', name: '进行中' }, { id: '2', name: '行程结束' }]
        },
    ]
    componentWillMount() {
        this.requestList();
    }

    // 查询表单
    handleFilterSubmit = (filterParams) => {
        this.params = filterParams;
        this.requestList()
    }
    requestList = () => {
        axios.ajax({
            url: '/map/bike_list',
              data:{
                  params:this.params
              }
        }).then((res) => {
            if (res.code === 0 ||res.code==="0") {
                this.setState({
                    total_count: res.result.total_count
                })
                this.renderAMap(res)
              
            }
        })
    }
    renderAMap = (res) => {
        let AMap = window.AMap
        console.log(res.result.route_list)
        let list = res.result.route_list;
        // 起点
        let gps1 = list[0].split(',');

         // 终点
        let gps2 = list[list.length - 1].split(',')

        // 获得中心点
        let Lon = gps1[0]/ 2 + gps2[0] / 2;
        let Lat = gps1[1] / 2 + gps2[1] / 2;
        console.log(Lon ,Lat)
        // 1.初始化地图 声明地图对象

        this.map = new window.AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 10.5, //初始化地图层级
            center: [Lon, Lat] //初始化地图中心点
        });

        this.addMapControl();
        //    调用路线图绘制方法
        //    获取map对象
        let map = this.map;
        // 3.1起始坐标点
        let startPoint = '';
        // 3.2终止坐标点 
        let endPoint = '';
        //    创建起始的marker
        if (list.length > 0) {
            let AMap = window.AMap
            startPoint = new window.AMap.LngLat(gps1[0], gps1[1]);
            endPoint = new window.AMap.LngLat(gps2[0], gps2[1]);
            // 创建一个 Icon
            let startIcon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(36, 42),
                // 图标的取图地址
                image: '/assets/start_point.png',
                // 图标所用图片大小
                imageSize: new AMap.Size(36, 42),
                // 图标取图偏移量
                // // imageOffset: new AMap.Pixel(16,42)
            });
            let endIcon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(36, 42),
                // 图标的取图地址
                image: '/assets/end_point.png',
                // 图标所用图片大小
                imageSize: new AMap.Size(36, 42),
                // 图标取图偏移量
                // // imageOffset: new AMap.Pixel(16,42)
            });
            // 将 icon 传入 marker
            let startMarker = new AMap.Marker({
                position: startPoint,
                icon: startIcon,
                offset: new AMap.Pixel(-16, -42)
            });
            let endMarker = new AMap.Marker({
                position: endPoint,
                icon: endIcon,
                offset: new AMap.Pixel(-16, -42)
            });
            // // 连接路线图
            let trackPoint = [];
            for (let i = 0; i < list.length; i++) {
                let thisPoint = list[i].split(",")
                trackPoint.push(new window.AMap.LngLat(thisPoint[0], thisPoint[1]))
            }
            let polyline = new AMap.Polyline({
                path: trackPoint,
                strokeColor: '#1869AD',
                strokeWeight: 3,
                strokeOpacity: 1
            })
            // 将 markers 添加到地图
            map.add([polyline, startMarker, endMarker]);
        }
// 添加地图中自行车所在位置图标
        let bikeList = res.result.bike_list;  
        let bikeIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(36, 42),
            // 图标的取图地址
            image: 'assets/bike.jpg',
            // 图标所用图片大小
            imageSize: new AMap.Size(36, 42),
            // 图标取图偏移量
            // // imageOffset: new AMap.Pixel(16,42)
        });
        bikeList.forEach((item) => {
            let p = item.split(',');
            let point = new window.AMap.LngLat(p[0], p[1]);
            let bikeMarker = new AMap.Marker({
                position: point,
                icon: bikeIcon,
                offset: new AMap.Pixel(-16, -42)
            });
            this.map.add(bikeMarker);
        })

//绘制服务区 连接路线图
        let slist = res.result.service_list
        let trackPoint = [];
        for (let i = 0; i < slist.length; i++) {
            let point = slist[i];
            trackPoint.push(new window.AMap.LngLat(point.lon, point.lat));
        } 
        let polygon = new window.AMap.Polygon({
            path: trackPoint,
            strokeColor: '#CE0000',
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: '#55bb8a',
            fillOpacity: 0.2
        })
        this.map.add([polygon]);
       
    }
    // 2.添加地图控件 放大或缩小
    addMapControl = () => {

        let map = this.map;
        // map.plugin([
        //     'AMap.ToolBar',
        // ], function () {
        //     // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        //     map.addControl(new window.AMap.ToolBar({
        //         // 简易缩放模式，默认为 false
        //         liteStyle: true
        //     }));
        // });
        //另一种带旋转的
        map.plugin(["AMap.ControlBar"], function () {
            var controlBar = new window.AMap.ControlBar()
            map.addControl(controlBar)
        });
    }

    // 百度地图
    renderBMap = (res) => { 
        console.log(res)
        let list = res.result.route_list;
        this.map = new window.BMapGL.Map('container');
        // 起点
        let gps1 = list[0].split(',');
        let startPoint = new window.BMapGL.Point(gps1[0], gps1[1]);
        // 终点
        let gps2 = list[list.length - 1].split(',')
        let endPoint = new window.BMapGL.Point(gps2[0], gps2[1]);
        this.map.centerAndZoom(endPoint, 11);
        //    设置起点图标
        let startPointIcon = new window.BMapGL.Icon('/assets/start_point.png', new window.BMapGL.Size(36, 42), {
            imageSize: new window.BMapGL.Size(36, 42),
            anchor: new window.BMapGL.Size(18, 42)
        })
        let bikeMarkerStart = new window.BMapGL.Marker(startPoint, { icon: startPointIcon });
        this.map.addOverlay(bikeMarkerStart);
        //    设置终点图标 
        let endPointIcon = new window.BMapGL.Icon('/assets/end_point.png', new window.BMapGL.Size(36, 42), {
            imageSize: new window.BMapGL.Size(36, 42),
            anchor: new window.BMapGL.Size(18, 42)
        })
        let bikeMarkerEnd = new window.BMapGL.Marker(endPoint, { icon: endPointIcon })
        this.map.addOverlay(bikeMarkerEnd);
        // 绘制车辆行驶路线 将起点和终点连接起来
        let routeList = [];
        list.forEach((item) => {
            let p = item.split(',');
            routeList.push(new window.BMapGL.Point(p[0], p[1]))//添加一个坐标点 经度和纬度
        })
        //   画线 画折线
        let polyLine = new window.BMapGL.Polyline(routeList, {
            strokeColor: '#ef4136',
            strokeWeight: 3,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyLine);
        //绘制服务区 画一个区域图 蒙版
        let servicePointList = [];
        let serviceList = res.result.service_list;
        serviceList.forEach((item) => {
            servicePointList.push(new window.BMapGL.Point(item.lon, item.lat))
        })
        // 画折线图 连接坐标点 经度和纬度 Polygon用这个考科一实现蒙板
        let polyServiceLine = new window.BMapGL.Polyline(servicePointList, {
            strokeColor: '#090',
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: '#ff8605',
            fillOpacity: 0.6
        })
        this.map.addOverlay(polyServiceLine)
        // 添加地图中自行车所在位置图标
        let bikeList = res.result.bike_list;
        let bikeIcon = new window.BMapGL.Icon('assets/bike.jpg', new window.BMapGL.Size(36, 42), {
            imageSize: new window.BMapGL.Size(36, 42),
            anchor: new window.BMapGL.Size(18, 42)
        })
        bikeList.forEach((item) => {
            let p = item.split(',');
            let point = new window.BMapGL.Point(p[0], p[1]);
            let bikeMarker = new window.BMapGL.Marker(point, { icon: bikeIcon });
            this.map.addOverlay(bikeMarker);
        })
    }

    render() {
        return (
            <div>
                <Card>
                    <BaseForm
                        formList={this.formList}
                        filterSubmit={this.handleFilterSubmit}
                    />
                </Card>
                <Card style={{ marginTopo: 10 }}>
                    <div>共{this.state.total_count}辆</div>
                    <div id="container" style={{ height: 500 }}></div>
                </Card>
            </div>
        )
    }
}